<template>

     <div class="mine">
                <div>
                    <van-nav-bar title="我的" @click-right="onClickRight">
                        <van-icon :name="require('../../assets/img/mine/mine_icon_setting.png')" slot="right" />
                    </van-nav-bar>
                </div>
                <div class="header_placeholder" style="width:100%;height:4rem" id="cust_head"></div>

                <div class="mine_main">
                    <div class="mine_head">
                        <div class="head_top">
                            <div class="head_left">
                                <div class="head_avt">
                                    <img src="../../assets/img/timg.jpg">
                                </div>
                                <div class="head_info">
                                    <h3 v-html="data.name"></h3>
                                    <p  v-html="data.mobile"></p>
                                    <span v-if="data.level==0">普通节点</span>
                                    <span v-else-if="data.level==1">初级节点</span>
                                    <span v-else-if="data.level==2">中级节点</span>
                                    <span v-else-if="data.level==3">高级节点</span>
                                    <span v-else-if="data.level==4">超级节点</span>
                                </div>
                            </div>
                            <dl class="head_right" @click="link_to()">
                                <dt>
                                    <img src="../../assets/img/mine/mine_success.png">
                                </dt>
                                <dd v-if="data.attestation_type==0">我要认证</dd>
                                <dd v-else-if="data.attestation_type==1">认证成功</dd>
                            </dl>
                        </div>
                        <ul class="head_bottom" style="display:flex">
                            <li>
                                <p>我的资产</p>
                                <span v-html="data.fixed_assets"></span>
                            </li>
                            <li>
                                <p>总业绩</p>
                                <span v-html="data.achievement"></span>
                            </li>
                            <li>
                                <p>账户余额</p>
                                <span v-html="data.surplus"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="mine_banner">
                        <!-- <img :src="baseURL+lunbo[0].img"> -->
                            <div class="slider">
                                <van-swipe :autoplay="30000" indicator-color="white"  style="height: 4rem">
                                <van-swipe-item v-for="(image, index) in images_swiper" :key="index">
                                    <img :src="baseURL+image.img" style="width: 100%;" />
                                </van-swipe-item>
                                
                                </van-swipe>
                            </div>
                        
                    </div>
                    <div class="mine_team">
                        <div class="mine_title">
                            <h4>我的团队</h4>
                            <router-link :to="{name:'invite',params:{id:data.invite}}">查看全部</router-link>
                        </div>
                        <ul class="mine_team_info mine_info_border">
                            <li>
                                <b v-html="myteam.chucount"></b>
                                <span >初级节点</span>
                            </li>
                            <li>
                                <b v-html="myteam.zhcount"></b>
                                <span>中级节点</span>
                            </li>
                            <li>
                                <b v-html="myteam.gaocount"></b>
                                <span>高级节点</span>
                            </li>
                            <li>
                                <b v-html="myteam.chaocount"></b>
                                <span>超级节点</span>
                            </li>
                        </ul>
                    </div>
                    <div class="mine_income">
                        <div class="mine_title">
                            <h4>我的收益</h4>
                        </div>
                        <div class="mine_info_border mine_swiper">
                            <van-swipe indicator-color="white">
                              <van-swipe-item>
                                  <table>
                                      <tr>
                                          <td></td>
                                          <td>累计收益</td>
                                          <td>节点预期分红</td>
                                          <td>社区推广提成</td>
                                      </tr>
                                      <tr>
                                          <td>累计</td>
                                          <td>{{myincome.first.totalprofit}} AZC</td>
                                          <td>{{myincome.tow.totalbonus}}  AZC</td>
                                          <td>{{myincome.three.totalspread}}  AZC</td>
                                      </tr>
                                      <tr>
                                          <td>新增</td>
                                          <td class="income_add">+{{myincome.first.addprofit}}</td>
                                          <td class="income_add">+{{myincome.tow.addbonus}}</td>
                                          <td class="income_add">+{{myincome.three.addspread}}</td>
                                      </tr>
                                      <tr>
                                          <td>折算</td>
                                          <td class="income_discount">{{myincome.first.convert}} USDT</td>
                                          <td class="income_discount">{{myincome.tow.bonus}} USDT</td>
                                          <td class="income_discount">{{myincome.three.spread}} USDT</td>
                                      </tr>
                                  </table>
                              </van-swipe-item>
                              <!-- <van-swipe-item>2</van-swipe-item>
                              <van-swipe-item>3</van-swipe-item> -->
                            </van-swipe>
                        </div>
                    </div>
                    <div class="mine_tool_wrap">
                        <div class="mine_title">
                            <h4>实用工具</h4>
                        </div>
                        <div class="mine_info_border">
                            <ul class="mine_tool">
                                <li>
                                    <router-link to="/ranking">
                                         <p><img src="../../assets/img/mine/mine_icon_tool01.png"></p>
                                        <span>英雄榜</span>
                                    </router-link>
                                   
                                </li>
                                <li>
                                   
                                   <router-link :to="{name:'invite',params:{id:data.invite}}">
                                        <p><img src="../../assets/img/mine/mine_icon_tool02.png"></p>
                                        <span>推广海报</span>
                                   </router-link>
                                </li>
                                <li>
                                    <router-link to="/recharge_transfer_AZC">
                                        <p><img src="../../assets/img/mine/mine_icon_tool03.png"></p>
                                        <span>余额互转</span>
                                   </router-link>
                                </li>
                                <li>
                                     <router-link to="/upload_auth">
                                         <p><img src="../../assets/img/mine/mine_icon_tool04.png"></p>
                                        <span>安全认证</span>
                                    </router-link>
                                   
                                 
                                </li>
                            </ul>
                            <ul class="mine_tool" style="display: margin:0.1rem 0;">
                                <li>
                                     <router-link to="/setting_pwd">
                                        <p><img src="../../assets/img/mine/mine_icon_tool05.png"></p>
                                        <span>交易密码</span>
                                   </router-link>
                                </li>
                                <li>
                                      <router-link to="/forget_pwd">
                                         <p><img src="../../assets/img/mine/mine_icon_tool06.png"></p>
                                        <span>重置密码</span>
                                     </router-link>
                                </li>
                                <li>

                        
                                    <router-link :to="{name:'gradeRule',params:{id:3}}">
                                        <p><img src="../../assets/img/mine/mine_icon_tool07.png"></p>
                                        <span>关于我们</span>
                                    </router-link>
                                </li>
                                <li>
                                     <router-link to="/my_tran">
                                        <p><img src="../../assets/img/mine/mine_icon_tool08.png"></p>
                                        <span>我的交易</span>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="footer_placeholder" style="width:100%;height:6rem"></div>
               <v-footer :footer_on="4"></v-footer>
            </div>


</template>

<script>
import footer from "../footer/footer";

export default {
 name: "login",
data() {
    return {
        data:{},
        myteam:{},
        lunbo:[{img:''}],
        myincome:{first:{},three:{},tow:{}},
        images_swiper:[],
    }
},
  components: {
    "v-footer": footer
  },
     watch:{
      $route(to,from){
        if(to.path == '/upload_auth' ){
            console.log(1)
        }else{
          console.log(2)
        }
      }
    },
mounted() { 
      let that=this;
    that.base.head_status(1)
    
 
  
    
    
    

 
        that.$toast.loading({ message: '加载中...', forbidClick: true,overlay:true});

       that.axios_b.all([ that.userinfo_metd(),that.myteam_metd(),that.myincome_metd(),that.sliderImg()])
        .then( that.axios_b.spread(function (res1, res2,res3) {

              that.$toast.clear();
        }));
},

 methods: { 
     link_to(){
    
            if(this.data.attestation_type==0){
                this.$router.push({ name: 'upload_auth'})
               
            }
     },
        sliderImg(){
         let that=this;
     
         var data={token:JSON.parse(localStorage.userinfo).token,'type':1}
                       that._API.bannerinfo(data).then(res => {
                            if(res.code==200){
                                 that.images_swiper=res.data;
                                 
                            }else{
                             //  that.$toast({ message: res.msg, position: "bottom" });
                            }
                      
                        }).catch(err => {
                            that.$toast({ message: "网络连接失败", position: "bottom" });
                        });
    },
     myincome_metd(){
                 let that=this;
            
                    var data={token:JSON.parse(localStorage.userinfo).token}
                        that._API.myincome(data).then(res => {
                            if(res.code==200){
                                 that.myincome=res.data;
                                that.myincome.first.convert=that.myincome.first.convert.toFixed(2)
                                that.myincome.tow.bonus=that.myincome.tow.bonus.toFixed(2)
                                that.myincome.three.spread= that.myincome.three.spread.toFixed(2)
                                
                                 
                            }else{
                                    that.$toast({ message: res.msg, position: "bottom" });
                            }
                           
                            
                            }).catch(err => {
                                console.log("err", err);
                            });
     },
    myteam_metd(){
                
                // chucount:初级会员数量  zhcount:中级用户数量  gaocount:高级用户数量   chaocount:超级级用户数量
                 let that=this;
            
                var data={token:JSON.parse(localStorage.userinfo).token}
                        that._API.myteam(data).then(res => {
                            if(res.code==200){
                                 that.myteam=res.data;
                                 
                            }else{
                                    that.$toast({ message: res.msg, position: "bottom" });
                            }
                            }).catch(err => {
                                console.log("err", err);
                            });
            }, 
            
            userinfo_metd(){
                 let that=this;
            
            var data={token:JSON.parse(localStorage.userinfo).token}
                       that._API.userinfo(data).then(res => {
                            if(res.code==200){
                                 that.data=res.data;
                                 
                            }else{
                                    that.$toast({ message: res.msg, position: "bottom" });
                            }
                        }).catch(err => {
                            console.log("err", err);
                        });
            },
           onClickRight(){
               this.$router.push({ name: 'setting'})
           }
               


      }
}
</script>

 <style  scoped src="../../assets/css/ba.css"></style>

<style  lang="less" lang="scss" scoped>

    /deep/ .slider .van-swipe{border-radius: 3.5rem}
    /deep/.van-nav-bar__title{max-width: initial}
    /deep/.van-nav-bar{
        background: #1C003F;
        width:100%;
        position: fixed;
    }
    /deep/.van-nav-bar .van-icon{
        color:#fff;
    }
    /deep/.van-icon__image{
        width:1.8em;
        height:1.8em;
    }
    /deep/.van-nav-bar__arrow{
        font-size:20px;
    }
    /deep/.van-nav-bar__title{
        color:#fff;
    }
   /deep/ .van-tabbar{
        background-color: #1C003F;
    }
    /deep/.van-tabbar-item--active{
        color: #831BFA;
    }

    .mine_main{
        padding:0 0.7rem;
        width:100%;
        box-sizing: border-box;
    }
    .mine_head{
        width:100%;
        height: 9.1875rem;
        background: url('../../assets/img/mine/mine_card_bg.png') no-repeat center/100%;
        padding:1rem 1rem;
        box-sizing: border-box;
        border-radius: .5rem;
    }
    .head_top{
        overflow: hidden;
    }
    .head_left{
        float: left;
        width:68%;
        padding:0.1rem;
    }
    .head_avt{
        display: inline-block;
        width:3.75rem;
        height:3.75rem;
        border-radius: 0.3rem;
        box-shadow: #8921ff 0 0 0.2rem 0.1rem;
        text-align: center;
    }
    .head_info{
        display: inline-block;
        margin-left:0.5rem;
    }
    .head_info h3{
        font-size: 1rem;
    }
    .head_info p{
        font-size: 0.8rem;
        color: rgba(255,255,255,0.6);
    }
    .head_info span{
        padding:.1rem 0.6rem;
        font-size: .7rem;
        color: #10E082;
        border:1px solid #10E082;
        border-radius: 1rem
    }
    .head_avt img{
        width:94%;
        height:94%;
        border-radius: 0.3rem;
        margin-top:3%;
    }
    .head_right{
        float: left;
        width:28%;
        text-align:center;
    }
    .head_right dt img{
        width:4rem;
    }
    .head_right dd{
        font-size:0.86rem;
    }
    // .head_bottom{
    //     display: flex;
    // }
    .head_bottom li{
        flex: 1;
        text-align: center;
        margin-top:0.5rem;
        font-size: 0.8rem;
    }
    .mine_banner{
        width:100%;
        margin-top:0.5rem;
    }
    .mine_banner img{
        width:100%;
        height:100%
    }
    .mine_title{
        line-height: 1.6rem;
        margin:0.5rem 0 0.4rem;
    }
    .mine_title h4{
        font-size: 1rem;
        color:#00C6FF;
        display: inline-block;
        font-weight: 400;
    }
    .mine_title a{
        float: right;
        color: #fff;
        font-size:0.86rem;
    }
    .mine_info_border{
        box-shadow: inset 0 0 1rem 0px #7b00ff;
        width:100%;
        border-radius: 0.3rem;
        padding:1rem 0;
    }
    .mine_team_info{
        display: flex;
    }
    .mine_team_info li{
        color:white;
        flex: 1;
        text-align: center;
    }
    .mine_team_info li b{
        display: block;
        font-size: 0.9rem;
    }
    .mine_team_info li span{
        font-size: 0.82rem;
    }
    .mine_swiper,.van-swipe,.mine_swiper table{
        width:100%;
    }
    .mine_swiper{
        box-sizing: border-box;
        padding:0.5rem;
    }
    .van-swipe__indicators{
        bottom:0;
    }
    .mine_swiper table{
        color: white;
        font-size:0.82rem;
        line-height: 1.2rem;
        margin-bottom:0.4rem;
        text-align:center;
    }
    .mine_swiper table .income_add{
        color:#FF005A;
    }
    .mine_swiper table .income_discount{
        color:#10E082;
    }
    .mine_tool{
        width:100%;
        display: flex;
    }
    .mine_tool li{
        flex: 1;
        text-align: center;
    }
    .mine_tool li a p{
        height:2rem;
    }
    .mine_tool li a p img{
        width:2rem;
    }
    .mine_tool li a span{
        color:#fff;
        font-size: 0.82rem;
    }
        
</style>
